<script lang="ts" xmlns="http://www.w3.org/1999/html">
	//子传父功能
	import { createEventDispatcher } from 'svelte';
	const dispatch = createEventDispatcher();
	const sendToParent = (n) => {
		// 指定一个参数“helloparent 可以随便写，但要与父级对应”向父组件发送消息 n
		dispatch("helloparent",n);
	};
	//接收父级传来的数据
	export let datalist = [];
	//接收父级传来的表单
	export let column = [];
	//页面根据父级传过来的表单数量进行布局处理
	let column_length = column.length;
	let main_body_2_3_grid_template_columns = "1fr";
	if (column_length > 0) {
		column_length = column_length * 3 + 3;//内容占3，复选框占1，最后一列占2： 内容数 * 3 + 复选框占1 + 最后一列占2
		for (let i = 1; i < column_length; i++) {
			main_body_2_3_grid_template_columns += " 1fr";
		}
	}
	let column_length_end = column_length - 1;//最后一列的位置column_length_end，和 总列column_length

</script>
<div class="main-body-1">
	<div class="main-body-1-1">
		机构名称：<input type="text" pattern="请输入"> 机构名称：<input type="text" pattern="请输入"> 机构名称：<input type="text" pattern="请输入">
	</div>
	<div class="main-body-1-2">
		<input type="button" value="重置"> <input type="button" value="查询"> 展开
	</div>
</div>
<div class="main-body-2">
	<div class="main-body-2-1">
		<div class="main-body-2-1-1">查询表格</div>
		<div class="main-body-2-1-2">功能按钮</div>
	</div>
	<div class="main-body-2-2" style="border-bottom: 1px solid #f0f0f0;grid-template-columns: {main_body_2_3_grid_template_columns};">
		<div style="grid-column: 1/1">
			<input type="checkbox">
		</div>
		{#each column as item, index}
			<div style="grid-column: {(index + 1) * 3 - 1}/{(index + 1) * 3 + 2}">
				{item.title}
			</div>
		{/each}
		<div style="grid-column: {column_length_end}/{column_length} spam">
			操作
		</div>
	</div>
	<!--			循环 始-->
	{#each datalist as vo, w_index}
		<div class="main-body-2-3" style="border-bottom: 1px solid #f0f0f0;grid-template-columns: {main_body_2_3_grid_template_columns};">
			<div style="grid-column: 1/1">
				<input type="checkbox">
			</div>
			{#each column as item, index}
				<div style="grid-column: {(index + 1) * 3 - 1}/{(index + 1) * 3 + 2}">
					{item.title}
				</div>
			{/each}
			<div style="grid-column: {column_length_end}/{column_length} spam">
				<button class="button-style" on:click="{sendToParent(vo.id)}" > 删除 </button>
			</div>
		</div>
	{/each}
	<!--			循环 结-->
</div>

<style>
	.main-body-1 {
		margin: 15px 0 15px 20px;
		background-color: #ffffff;
		display: grid;
		grid-template: "c1 c1 c2" 1fr;
		padding: 15px 0 15px 0;
	}
	.main-body-1-1 {
		grid-area: c1;
		text-align: left;
		margin-left: 10%;
	}
	.main-body-1-2 {
		grid-area: c2;
		text-align: right;
		margin-right: 20%;
	}
	.main-body-2 {
		margin: 15px 0 15px 20px;
		background-color: #ffffff;
		display: grid;
		grid-template-columns: 1fr;
		padding: 15px;
	}
	.main-body-2-1 {
		text-align: left;
		display: grid;
		grid-template: "c21 c21 c22" 1fr;
	}
	.main-body-2-1-1 {
		grid-area: c21;
		text-align: left;
	}
	.main-body-2-1-2 {
		grid-area: c22;
		text-align: right;
	}
	.main-body-2-2 {
		display: grid;
		background-color: #fafafa;
		padding: 15px;
		margin-top: 20px;
		text-align: center;
	}
	.main-body-2-3 {
		display: grid;
		padding: 15px;
		text-align: center;
	}
	.button-style {
		background-color: #ff0032;border: none;color: #ffffff;padding: 2px 6px 5px 7px;
	}
</style>